<template>
  <div class="dashboard-container">
    <el-card style="height: 120px; margin-bottom: 20px">
      <!-- 给el-form绑定form -->
      <el-form label-width="80px" :model="form" :inline="true">
        <el-form-item label="手机号">
          <el-input v-model="form.phone" placeholder="手机号" clearable />
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="form.paytime"
            type="date"
            placeholder="开始日期筛选"
            size="default"
          />
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="form.endtime"
            type="date"
            placeholder="结束日期筛选"
            size="default"
          />
        </el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="searchclick"
          style="margin-left: 12px"
          >筛选</el-button
        >
        <el-button @click="resetSearch">重置</el-button>
      </el-form>
      <div>
        <el-row :gutter="18">
          <el-col :span="3">
            <div>总数量：<span>{{tableData1.totalCount}}</span></div>
          </el-col>
          <el-col :span="3">
            <div>总金额：<span>{{tableData1.zprice}}</span></div>
          </el-col>
        </el-row>
      </div>
    </el-card>
    <el-table :data="tableData" border>
      <el-table-column prop="id" label="ID" align="center" width="150">
      </el-table-column>
      <!-- <el-table-column prop="name" label="名称" align="center">
      </el-table-column> -->
      <el-table-column prop="nickname" label="用户名称" align="center">
      </el-table-column>
      <el-table-column prop="phone" label="手机号" align="center">
      </el-table-column>
      <el-table-column prop="price" label="充值金额" align="center">
      </el-table-column>
      <el-table-column prop="addtime" label="时间" align="center">
        <template slot-scope="scope">
          {{ scope.row.addtime | datefilter }}
        </template>
      </el-table-column>
<!--      <el-table-column prop="状态" label="状态" align="center">-->
<!--        <template slot-scope="{ row }">-->
<!--          <el-tag :type="row.state == 1 ? 'primary' : 'success'">{{-->
<!--              row.state | statefilter-->
<!--            }}</el-tag>-->
<!--        </template>-->
<!--      </el-table-column>-->

    </el-table>
    <Pagination2
      :currentPage="this.form.pageNo"
      :size="this.form.pageSize"
      :total="total"
      @changelimit="changelimit"
      @changecurrentPage="changecurrentPage"
    ></Pagination2>
    <add ref="add" @refresh="refresh"></add>
  </div>
</template>

<script>
import {
  delcopywritingdel,
  postczlist, tixianlistRecommend
} from '@/api/servetypeIndex'
import add from "./modules/add";
export default {
  name: "Dashboard",
  components: {
    add,
  },
  data() {
    return {
      that: this,
      tableData1: {
        totalCount: 0,
        zprice: 0,
      },
      form: {
        phone: "",
        pageNo: 1,
        paytime: "",
        endtime: "",
        pageSize: 15,
      },
      reqCategoryLoaded: false, // 新增标志
      total: 0,
      tableData: [],
    };
  },
  // beforeCreate() {
  //   that = this;
  // },
  filters: {
    statefilter(val) {
      if (val == 1) {
        return "未推送";
      } else {
        return "已推送";
      }
    },
    datefilter(val) {
      if (val) {
        var date = new Date(parseInt(val) * 1000);
        var Year = date.getFullYear();
        var Moth =
          date.getMonth() + 1 < 10
            ? "0" + (date.getMonth() + 1)
            : date.getMonth() + 1;
        var Day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
        var Hour =
          date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
        var Minute =
          date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
        var Sechond =
          date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
        var GMT =
          Year +
          "-" +
          Moth +
          "-" +
          Day +
          "   " +
          Hour +
          ":" +
          Minute +
          ":" +
          Sechond;

        return GMT;
      } else {
        return "";
      }
    },
  },
  methods: {
    searchclick() {
      this.getcouponlist1();
    },
    resetSearch() {
      this.form.phone = "";
      this.form.paytime = "";
      this.form.endtime = "";
      this.getcouponlist1();
    },
    addrenyuan() {
      this.$refs.add.add();
    },
    // 子传父:自定义事件
    refresh() {
      this.getcouponlist1();
    },
    async getcouponlist1() {
      // let result = await postczlist(this.form);
      let param = {
        paytime:
          this.form.paytime == ""
            ? ""
            : Math.floor(new Date(this.form.paytime).getTime() / 1000),
        endtime:
          this.form.endtime == ""
            ? ""
            : Math.floor(new Date(this.form.endtime).getTime() / 1000),
      };
      let result = await postczlist({
        state: this.form.state,
        ...param,
        pageNo: this.form.pageNo,
        pageSize: this.form.pageSize,
        adminid:Number(localStorage.getItem('userId'))
      });
      console.log(result);
      if (result.code == 0) {
        if (result.data.data != []) {
          this.tableData = result.data.data;
          this.total = result.data.totalCount;
          this.tableData1.totalCount = result.data.totalCount
          this.tableData1.zprice = result.data.zprice
          this.tableData.forEach((item, index) => {
            // if (item.iamges != "") {
            //   this.$set(item, "images", item.images.split(","));
            // }
          });
          console.log("最后", this.tableData);
        }
      }
    },
    changelimit(val) {
      this.form.pageSize = val;
      this.getcouponlist1();
    },
    changecurrentPage(val) {
      this.form.pageNo = val;
      this.getcouponlist1();
    },
    changerenyuan(val) {
      this.$refs.add.edit(val);
    },
    async deldel(val) {
      let result = await delcopywritingdel({ id: val.id,adminid:Number(localStorage.getItem('userId')) });
      if (result.code == 0) {
        this.$message({
          showClose: true,
          message: "推送成功",
          type: "success",
        });
        this.getcouponlist1();
      }
    },
  },
  watch: {
    "form.name": {
      handler(newVal) {
        if (newVal == "") {
          this.getcouponlist1();
        }
      },
    },
  },
  mounted() {
    this.getcouponlist1();
    // this.gettypelist();
    // 那是我，我知道问题 账号和角色是我做的 这里为什么没有菜单选择 新增有，修改和新增是用v-if 和 else判断的，字段我忘记弄了 打开
  },
};
</script>

<style lang="scss" scoped>
// .dashboard {
//   &-container {
//     margin: 30px;
//   }
//   &-text {
//     font-size: 30px;
//     line-height: 46px;
//   }
// }
</style>
